<template>
  <view class="head bar-h" @click="goToView">
    <!-- :style="`background:${userStore.MyShop.shopBackgroundColor} ;`" -->

    <view class="head_type"> {{ t("Grade") }} </view>
    <view class="head_icon">
      <image
        class="icon"
        v-if="deviceStore.MyShop.shopGrade == 'A'"
        src="/static/images/user/A.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else-if="deviceStore.MyShop.shopGrade == 'B'"
        src="/static/images/user/B.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else-if="deviceStore.MyShop.shopGrade == 'C'"
        src="/static/images/user/C.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else
        src="/static/images/user/A.png"
        mode="widthFix"
      ></image>
      <view class="grade">
        {{ userStore.MyShop.shopGrade }}
      </view>
    </view>
    <view class="head_num"> {{ userStore.MyShop.vat }} </view>
  </view>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useUserStore, useDeviceStore } from "@/store";
const userStore = useUserStore();
const deviceStore = useDeviceStore();
const { t } = useI18n();

const goToView = () => {
  uni.navigateTo({
    url: "/pages/user/userDetail",
  });
};
console.log("userStore.MyShop", userStore.MyShop);
</script>

<style lang="scss" scoped>
.head {
  padding: 20rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // background: #267a58;
  background: #004b41;
  border-radius: 0 0 30rpx 30rpx;

  .head_type {
    padding: 10rpx 0;
  }

  .head_icon {
    width: 200rpx;
    position: relative;

    .icon {
      width: 100%;
    }

    .grade {
      position: absolute;
      top: 20rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 62px;
    }
  }

  .head_num {
    margin-top: 20rpx;
  }
}
</style>
